<template>
  <div class="goods">
    <!-- 1.搜索区域 -->
    <div class="header">
      <span style="width: 95px; margin: auto 0px">商品名称：</span>
      <el-input v-model="input" placeholder="请输入商品名称" clearable></el-input>
      <el-button type="primary" @click="searchInput">查询</el-button>
      <el-button type="primary" @click="toPath('/add-goods')">添加</el-button>
    </div>
    <!-- 2.表格区域展示视图数据 -->
    <div class="warapper">
      <el-table
        :data="tableData"
        style="width: 100%"
        border
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="id" label="商品ID" width="100"></el-table-column>
        <el-table-column prop="title" label="商品名称" width="100" show-overflow-tooltip></el-table-column>
        <el-table-column prop="price" label="商品价格" width="100"></el-table-column>
        <el-table-column prop="num" label="商品数量" width="100"></el-table-column>
        <el-table-column prop="category" label="商品类目" width="100" show-overflow-tooltip></el-table-column>
        <el-table-column prop="image" label="商品图片" ></el-table-column>
        <el-table-column prop="sellPoint" label="商品卖点" show-overflow-tooltip></el-table-column>
        <el-table-column prop="desc" label="商品描述" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 3.分页 -->
    <div class="pagination-div">
      <MyPagination 
        :total="total" 
        :pageSize="pageSize"
        :currentPage="pageIndex"
        @changePage="changePage"
      />
    </div>
  </div>
</template>

<script>
import MyPagination from '../../components/MyPagination.vue'
export default {
  components: {
    MyPagination,
  },
  data() {
    return {
      input: "",
      tableData: [],
      total: 0,
      pageSize: 10,
      pageIndex: 1,
    }
  },
  mounted() {
    this.getAllList()
  },
  methods: {
    toPath(path) {
      this.$router.push({
        path: path,
        query: {
          goodsForm: null
        }
      })
    },
    getAllList() {
      let res = require('./tableData.json')
      // console.log(res);
      this.tableData = res.tableData;
      this.total = res.total;
    },
    /**
    编辑操作 */
    handleEdit(index,row) {
      this.$router.push({
        path: "/add-goods",
        query: {
          goodsForm: row
        }
      })
    },
    /**
    删除操作 */
    handleDelete(index,row) {
      this.$confirm('此操作将永久删除id为'+row.id+'的该商品, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    /**
     * 子组件MyPagination传递页面过来
     */
    changePage(val) {
      this.pageIndex = val;
      this.$message({
        showClose: true,
        message: '成功跳转到第'+val+'页',
        type: 'success'
      });
    },
    /**
     * 根据商品名称搜索
     */
    searchInput() {
      this.pageIndex = 1;
      let mes = ""
      if(this.input == "") {
        mes = "条件为空，全查"
      } else {
        mes = "搜索的商品名称条件为：" + this.input
      }
      this.$message({
        showClose: true,
        message: mes,
        type: 'success'
      });
    }
  }
}
</script>

<style lang="less" scoped>
.goods {
  padding: 16px;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  
  .header {
    display: flex;

    button {
      margin-left: 16px;
    }
  }

  .warapper {
    margin: 16px 0;
  }

  .pagination-div {
    text-align: center;
    margin: 16px;
  }
}

/deep/ .el-table {
  .el-table__body-wrapper {
    .el-table__row:hover {
      td {
        background-color: rgba(228, 255, 246, 0.863);
      }
    }
  }
}
</style>